﻿@{
    ViewBag.Title = "Index";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户页面</title>
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div style="width:100%">
        <form class="layui-form layui-row layui-col-space16">
            <div class="layui-col-sm3">
                <label class="layui-form-label">仓库名称</label>
                <div class="layui-input-block">
                    <input type="text" name="repositoryName" placeholder="请输入仓库名称" class="layui-input">
                </div>
            </div>
            <div class="layui-col-sm3">
                <button type="button" class="layui-btn layui-bg-orange" onclick="layuiTable()">查询</button>
                <button type="button" class="layui-btn layui-bg-blue" onclick="Addopen()">新增</button>
                <button type="button" class="layui-btn layui-bg-red" onclick="Deleted(0)">删除</button>
            </div>
        </form>
    </div>

    <table class="layui-hide" id="tabledata" lay-filter="tabledata"></table>
    <div id="laypage" style="margin-left:15px;margin-top:5px"></div>
    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue" lay-event="update">
                <i class="layui-icon  layui-icon-edit"></i>
                编辑
            </a>
            <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-red" lay-event="delete" >
                <i class="layui-icon  layui-icon-delete"></i>
                删除
            </a>
        </div>
    </script>

    <div id="PopupBox" style="display: none;width:1000px">
        <form id="Vendorform" class="layui-form layui-form-pane" style="margin:15px">
            <div class="layui-form-item">
                <label class="layui-form-label">仓库代码</label>
                <div class="layui-input-block">
                    <input type="text" name="RepositoryCode" placeholder="请输入仓库代码" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">仓库名称</label>
                <div class="layui-input-block">
                    <input type="text" name="RepositoryName" placeholder="请输入仓库名称" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label">仓库属性</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="RepositoryAttribute" value="数码产品" title="数码产品">
                    <input type="checkbox" name="RepositoryAttribute" value="日用" title="日用">
                    <input type="checkbox" name="RepositoryAttribute" value="电器" title="电器">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="demo2" onclick="Close()">确认</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>

    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script src="~/libs/jquery/jquery.js"></script>
    <script>
        //实例化layui
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var laypage = layui.laypage;

        //自定义字段
        var index={};
        var Id="";
        var rowCount = 0;
        var pageCount = 0;
        var pageIndex = 1;
        var pageSize = 10;
        var tableStatusdata=[];

        //Layui页面渲染事件
        layui.use(function(){
            layuiTable();
            //显示点击行事件
            table.on('tool(tabledata)', function(obj){
                if(obj.event=='delete'){
                    tableStatusdata=[];
                    tableStatusdata.push(obj.data)
                    Deleted(1);
                }
                if(obj.event=='update'){
                    Updateopen(obj.data)
                }
            })
        })

        //打开新增弹出框
        function Addopen() {
            Id=0;
            $("[name='RepositoryCode']").val("");
            $("[name='RepositoryName']").val("");
            $("[name='RepositoryAttribute']").prop("checked",false);
            form.render();
            //打开弹出层
            index=layer.open({
                type: 1,
                shade: false, // 不显示遮罩
                title:['新增仓库', 'text-align:center;font-size:25px'],
                offset: '10px',
                content: $('#PopupBox'), // 捕获的元素
                area: ['1000px', '700px'], //宽高
                end: function(){
                    // layer.msg('关闭后的回调', {icon:6});
                   var div = document.getElementById('PopupBox');
                   div.style.display = 'none';
                }
            });
        }

        //提交
        function Close (){
            Id==0?Addclose():Updateclose()
        }

        //提交仓库定义信息
        function Addclose() {
            form.on('submit(demo2)', function(data){
                var RepositoryCode=$("[name='RepositoryCode']").val();
                var RepositoryName=$("[name='RepositoryName']").val();
                var chk_value =[];
                $("[name='RepositoryAttribute']:checked").each(function(){
                    chk_value.push($(this).val());
                });
                var RepositoryAttribute=chk_value.toString();
                //ajax
                $.ajax({
                     url:"/RepositoryDefinition/insert",
                     type:"post",
                     async:false,
                     datatype:"json",
                     data:{RepositoryCode,RepositoryName,RepositoryAttribute},
                     success: function (reslut) {
                        if(reslut==1){
                            layer.msg('添加成功', {
                                time: 5000, // 5s 后自动关闭
                                offset: '16px'
                            });
                            layuiTable();
                            layer.close(index);
                        }
                        else{
                            layer.msg('添加失败', {
                                time: 5000, // 5s 后自动关闭
                                offset: '16px'
                            });
                        }
                    }
                })
                return false; // 阻止表单跳转
            })

        }

        //显示仓库定义信息
        function layuiTable (){
            var repositoryName=$("[name='repositoryName']").val();
            $.ajax({
                 url:"/RepositoryDefinition/GetInquire",
                 type:"get",
                 async:false,
                 datatype:"json",
                 data:{repositoryName:repositoryName,pageIndex:pageIndex,pageSize:pageSize},
                 success:function(reslut) {
                    list =reslut.queryable;
                    rowCount=reslut.rowCount;
                    pageCount=reslut.pageCount;
                }
            })
            //显示表格
            table.render({
                elem: '#tabledata',
                id: 'id', // 自定义 id 索引
                height: '745px',
                cols: [[ //标题栏
                      {checkbox: true, fixed: true},
                      {field: 'repositoryCode', title: '仓库代码'},
                      {field: 'repositoryName', title: '仓库名称'},
                      {field: 'repositoryAttribute', title: '仓库属性'},
                      {fixed: 'right', title:'操作', templet: '#toolDemo',width: 140},
                ]],
                data:list,
                //skin: 'line', // 表格风格
                even: true,
                //page: true, // 是否显示分页
                //limits: [5, 10, 15],
                //limit: 5 // 每页默认显示的数量
            });

            //完整显示分页
            laypage.render({
                elem: 'laypage', // 元素 id
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                count: rowCount, // 数据总数
                limit: pageSize,
                curr:pageIndex,
                limits:[10,20,30],
                jump: function(obj){
                    if(pageIndex!=obj.curr||pageSize!=obj.limit){
                        pageIndex=obj.curr;
                        pageSize=obj.limit;
                        layuiTable();
                    }
                }
            });
        }

        //删除仓库定义信息
        function Deleted(i){
            index=layer.confirm('是否确定删除？', {
                title: false,
                area: ['100px', '125px'],
                btn: ['确定', '取消'], //按钮
                offset: '16px',
                btnAlign: 'c' //按钮水平居中对齐
            },
            function() {
                if(i==0){
                    var tableStatus = table.checkStatus('id');
                    tableStatusdata=tableStatus.data // 选中行的数据
                    console.log(tableStatusdata);
                    if(tableStatusdata.length==0){
                        layer.msg('至少选择一项', {
                            time: 2000, // 2s 后自动关闭
                            offset: '16px'
                        });
                        return;
                    }
                }
                var ids=tableStatusdata.map(x=>x.id);
                layer.close(index);
                $.ajax({
                    url: "/RepositoryDefinition/deleted",
                    type: "post",
                    async: false,
                    datatype: "json",
                    data:{ids:ids.toString()},
                    success: function (reslut) {
                        if(reslut==1){
                            layer.msg('删除成功', {
                                time: 1000, // 1s 后自动关闭
                                offset: '16px'
                            });
                            layuiTable();
                        }
                        else{
                            layer.msg('删除失败', {
                                time: 1000, // 1s 后自动关闭
                                offset: '16px'
                            });
                        }
                    }
                })
            },
            function() {
                layer.msg('取消成功', {
                    time: 5000, // 5s 后自动关闭
                    offset: '16px'
                });
            })
        }

        //打开编辑弹出框
        function Updateopen(data) {
            Id=data.id;
            $("[name='RepositoryCode']").val(data.repositoryCode);
            $("[name='RepositoryName']").val(data.repositoryName);
            var chk_value=data.repositoryAttribute.toString().split(',');
            console.log(chk_value);
            $("[name='RepositoryAttribute']").each(function(){
                var input=this;
                chk_value.forEach(function(item){
                    console.log(item);
                    console.log(input);
                    if($(input).val()==item){
                        $(input).prop("checked",true);
                    }
                })
            })
            //$("[name='RepositoryAttribute']").prop("checked",false);
            form.render();
            //打开弹出层
            index=layer.open({
                type: 1,
                shade: false, // 不显示遮罩
                title:['编辑仓库', 'text-align:center;font-size:25px'],
                offset: '10px',
                content: $('#PopupBox'), // 捕获的元素
                area: ['1000px', '700px'], //宽高
                end: function(){
                    // layer.msg('关闭后的回调', {icon:6});
                   var div = document.getElementById('PopupBox');
                   div.style.display = 'none';
                }
            });
        }

        //提交编辑仓库定义信息
        function Updateclose(){
            form.on('submit(demo2)', function(data){
                var RepositoryCode=$("[name='RepositoryCode']").val();
                var RepositoryName=$("[name='RepositoryName']").val();
                var chk_value =[];
                $("[name='RepositoryAttribute']:checked").each(function(){
                    chk_value.push($(this).val());
                });
                var RepositoryAttribute=chk_value.toString();
                //ajax
                $.ajax({
                     url:"/RepositoryDefinition/update",
                     type:"post",
                     async:false,
                     datatype:"json",
                     data:{Id,RepositoryCode,RepositoryName,RepositoryAttribute},
                     success: function (reslut) {
                        if(reslut==1){
                            layer.msg('编辑成功', {
                                time: 5000, // 5s 后自动关闭
                                offset: '16px'
                            });
                            layuiTable();
                            layer.close(index);
                        }
                        else{
                            layer.msg('编辑失败', {
                                time: 5000, // 5s 后自动关闭
                                offset: '16px'
                            });
                        }
                    }
                })
                return false; // 阻止表单跳转
            })
        }
    </script>
</body>
</html>
